// 修订 你需要 适合 自己添加 position : absolute;
import { listenCssVar } from '../../../components/aaanewApp/global/cssVarPropsFunc/listenCssVar';
import {
  removeClass,
  SetStaticCssTxtFunc,
} from '../../../components/aaanewApp/global/global';
import { injectFactory } from '../../../components/aaanewApp/globalLib/global';

let injectFacObj = injectFactory('v_D_M');

let injectFacUpObj = injectFactory('v_UP_M');

/**
 * drag_el drag 标识
 */
let dragIdentify = 'drag_el';

/**
 * @time 2024.01.12 16:39 晴 drage
 * -- window 存储 div 的 设置信息 data 为 id  id 为 相关设置信息
 */
/**
 * 目标元素 集
 */
let targetElarr = { data: [] };

/**
 * css 变量控制
 */
let cssvarObj;

/**
 * v-drag 拖拽指令 的 样式
 * css var 动态 top left 样式
 */
let StaticCss = SetStaticCssTxtFunc('vDrag');

/**
 * 鼠标点击后 计算得出 当前 鼠标位置 和 距离元素的 用户位置
 */
let currentOp = {
  elID: undefined,
  /**
   * 元素 宽高
   */
  width: 0,
  height: 0,
  /** move 开始 时 元素的位置 */
  startTop: undefined,
  startLeft: undefined,
  /** 隐藏目标 好像用不到 global 可以删  */
  /** move 开始 位移的相对量 */
  moveX: 0,
  moveY: 0,
  /** 鼠标在 目标元素中的位置信息 */
  clientTop: undefined,
  clientLeft: undefined,
  clientRight: undefined,
  clientBottom: undefined,
};

function initvd(element, outer) {
  //   console.log(element.classList);
  // outer 为 true 时 尽可能复制一个元素
  if (outer) {
    console.log('复制一个元素');
    // element 更改定向
  }
  let dragID = 'drag_' + targetElarr['data'].length;
  element.setAttribute('dragID', dragID);
  targetElarr['data'].push(dragID);
  cssvarObj = listenCssVar(element);
  targetElarr[dragID] = { cssvarObj, currentOp };
  //   鼠标 移入事件
  element.addEventListener('mouseenter', enterAddH);
  //   鼠标 移出事件
  element.addEventListener('mouseleave', leaveAddH);

  let staCssCla = `v_drag_${dragID}`;
  let V_DCla = `v_D_${dragID}`;

  //   添加 动态 css var 样式 到 head 元素中
  cssVar_top0left(staCssCla, V_DCla);

  //添加 drag 标识
  removeClass(element, dragIdentify, true);

  // 添加 class 到 目标元素中
  removeClass(element, V_DCla, true);

  // 添加 hover 鼠标 手形状
  removeClass(element, 'cursorPointer', true);

  removeClass(element, 'z_i99', true);
}

/**
 * @param {Event} event event 鼠标移入事件
 */
function enterAddH(event) {
  cssvarObj = getCssvarObj(event)['cssvarObj'];

  //   console.log(
  //     cssvarObj,
  //     targetElarr,
  //     targetElarr['data'][
  //       targetElarr['data'].indexOf(event.target.getAttribute('dragID'))
  //     ],
  //     targetElarr['data'].indexOf(event.target.getAttribute('dragID'))
  //   );
  //   console.log(event);
  //   currentOp['startTop'] = event.target.offsetTop;
  //   currentOp['startLeft'] = event.target.offsetLeft;
  // 添加 mouse down 事件
  event.target.addEventListener('mousedown', downH);
  // 添加 mouse up 事件
  event.target.addEventListener('mouseup', upH);
  //   console.log('mouse enter');
}
/**
 * @param {Event} event event 鼠标移出事件
 */
function leaveAddH(event) {
  // 移除 mouse down 事件
  event.target.removeEventListener('mousedown', downH);
  // 移除 mouse up 事件
  event.target.removeEventListener('mouseup', upH);
  //  如果元素鼠标 脱离 移除 windows 上挂载的 moveH__inJ
  //   window.removeEventListener('mousemove', moveH__inJ);
  //   console.log('mouse leave');
}

/**
 * 鼠标点下 开启元素跟随 鼠标位移 效果
 * @param {Event} event event 鼠标 点下事件
 */
function downH(event) {
  //   console.log(event);
  injectFacObj.exposeProp({ currentOp, followEl });
  currentOp = getCssvarObj(event)['currentOp'];
  lockCssvarObj();
  currentOp['elID'] = event.target.id;

  currentOp['startTop'] = event.target.offsetTop;
  currentOp['startLeft'] = event.target.offsetLeft;
  currentOp['clientTop'] = event.pageY - currentOp['startTop'];
  currentOp['clientLeft'] = event.pageX - currentOp['startLeft'];

  currentOp['width'] = event.target.offsetWidth;
  currentOp['height'] = event.target.offsetHeight;

  currentOp['clientBottom'] = currentOp['height'] - currentOp['clientTop'];
  currentOp['clientRight'] = currentOp['width'] - currentOp['clientLeft'];

  // body 添加 hover 鼠标 手形状
  removeClass(document.body, 'cursorPointer', true);

  //   console.log(event);
  window.addEventListener('mousemove', moveH__inJ);
}

/**
 * 鼠标抬起 取消元素跟随效果
 * @param {Event} event event 鼠标 抬起事件
 */
function upH(event) {
  releaseCssvarObj();
  //   currentOp['moveX'] = 0;
  //   currentOp['moveY'] = 0;
  currentOp['startTop'] = event.target.offsetTop;
  currentOp['startLeft'] = event.target.offsetLeft;

  let currentDragELID = event.target.getAttribute('dragID');
  targetElarr[currentDragELID] = { cssvarObj, currentOp };
  // body 移除 hover 鼠标 手形状
  removeClass(document.body, 'cursorPointer');

  //   console.log(event);
  if (injectFacUpObj.getstatus(event)) {
    injectFacUpObj.injected(event);
  }

  window.removeEventListener('mousemove', moveH__inJ);
}

/**
 * 鼠标移动 设置元素的 内置样式 top 和 left 启用跟随效果
 * @param {Event} event 鼠标移动 设置 内置样式的 top 和 left --window
 */
function moveH__inJ(event) {
  //   currentOp['moveX'] += event.movementX;
  //   currentOp['moveY'] += event.movementY;
  //   console.log(currentOp['startTop'], currentOp['moveY']);
  //   console.log(injectFacObj);
  if (injectFacObj.getstatus(event)) {
    injectFacObj.injected(event);
  } else {
    followEl(
      event.pageY - currentOp['clientTop'] + currentOp['moveY'],
      event.pageX - currentOp['clientLeft'] + currentOp['moveX']
    );
  }
}

/**
 * 根据 top 和 left 的 值 设置 cssVar
 * @param {string} top 默认不带单位 px
 * @param {string} left 默认不带单位 px
 */
function followEl(top, left) {
  //   console.log(top, left);
  cssvarObj.setCssVar('--top', top + 'px');
  cssvarObj.setCssVar('--left', left + 'px');
}

function cssVar_top0left(staCssCla, V_DCla) {
  StaticCss(staCssCla, `.${V_DCla}{top : var(--top); left : var(--left);}`);
  // targetEl.style = 'top: var(--top)px; left: var(--left)px;';
}

/**
 * true 表示 锁定
 * false 表示 释放
 */
let lockCssvarObjStatus = false;

/**
 * 在 移动一个 v-drag 的元素时 锁定
 */
function lockCssvarObj() {
  lockCssvarObjStatus = true;
}

/**
 * 释放 对 v-drag 单一元素 的 锁定
 */
function releaseCssvarObj() {
  lockCssvarObjStatus = false;
}

/**
 *
 * @param {Event} event event 对当前元素的 认定
 */
function getCssvarObj(event) {
  // 锁定状态 返回 当前 的 cssvarObj 和 currentOp
  if (lockCssvarObjStatus) {
    return { cssvarObj, currentOp };
  } else {
    let currentDragELID = event.target.getAttribute('dragID');
    let cdElID_i = targetElarr['data'].indexOf(currentDragELID);
    if (cdElID_i > -1) {
      return targetElarr[currentDragELID];
    }

    // return targetElarr[
    //   targetElarr['data'][
    //     targetElarr['data'].indexOf(event.target.getAttribute('dragID'))
    //   ]
    // ];
  }
}

export { initvd };
